import 'package:flutter/material.dart';

class ScrollControllerPage2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ScrollControllerPage2State();
  }
}

class _ScrollControllerPage2State extends State<ScrollControllerPage2> {
  String _progress = "0%";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scroll Controller 2"),
      ),
      body: Scrollbar(
        child: NotificationListener<ScrollNotification>(
          /// 在接收到滚动事件时，参数类型为ScrollNotification，它包括一个metrics属性，它的类型是ScrollMetrics，
          /// 该属性包含当前ViewPort及滚动位置等信息：
          /// 
          /// pixels：当前滚动位置。
          /// maxScrollExtent：最大可滚动长度。
          /// extentBefore：滑出ViewPort顶部的长度；此示例中相当于顶部滑出屏幕上方的列表长度。
          /// extentInside：ViewPort内部长度；此示例中屏幕显示的列表部分的长度。
          /// extentAfter：列表中未滑入ViewPort部分的长度；此示例中列表底部未显示到屏幕范围部分的长度。
          /// atEdge：是否滑到了可滚动组件的边界（此示例中相当于列表顶或底部）。
          onNotification: (notification) {
            double progress = notification.metrics.pixels / notification.metrics.maxScrollExtent;
            setState(() {
              _progress = "${(progress * 100).toInt()}%";
            });
            print("BottomEdge: ${notification.metrics.extentAfter == 0}");
            return false;
          },
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              ListView.builder(
                itemCount: 100,
                itemExtent: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("data"),
                  );
                },
              ),
              CircleAvatar(
                radius: 30,
                child: Text(_progress),
                backgroundColor: Colors.black54,
              )
            ],
          ),
        ),
      )
    );
  }
}